<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>html的演示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--		<meta http-equiv="refresh" content="3;url=http://www.shuangtixi.com"/>-->

        <link rel="stylesheet" type="text/css" href="css-demo.css"/>


    </head>
    <body>

        <!-- 点击事件按钮 -->
        <button onclick="writeLine()">生成金字塔</button>
        <button ondblclick="alert('你双击了我')">测试双击事件</button>
        <!-- 标题标签 -->
        <h1 onclick="writeLine()">这是标题 1</h1>
        <h2>这是标题 2</h2>
        <h3>这是标题 3</h3>
        <h4>这是标题 4</h4>
        <h5>这是标题 5</h5>
        <h6>这是标题 6</h6>

        <!-- 段落标签 -->
        <p>&quot;领先的&quot; &amp;Web 技术教程 - 全部免费<br>
            在 W3School，你可以找到你所需要的所有的网站建设教程。

            从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 Java。

            从左侧的菜单选择你需要的教程！</p>

        <!-- 超链接标签 -->
        <a target="_blank" href="https://www.baidu.com/">百度</a>
        <a href="mailto:364508535@qq.com">发邮件</a>

        <!-- 图片标签 -->
        <img title="百度" alt="百度一下" src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>

        <!-- 水平分割线 -->

        <hr>

        <!-- 居中标签 -->
        <center>
            <h1>居中文本</h1>
        </center>

        <!-- 列表 -->
        <ol type="i">
            <!-- 有序标签 -->
            <li class="css-class-demo">打开冰箱</li>
            <li class="css-class-demo">把大象放进去</li>
            <li class="css-class-demo">关门</li>
        </ol>

        <ul type="circle">
            <!-- 无序标签 -->
            <li id="apple">苹果</li>
            <li>香蕉</li>
        </ul>

        <!-- 音视频 -->
        <video controls="controls"
               src="https://vd9.bdstatic.com/mda-rg2t8s66hpk1p97c/mb/cae_h264/1751570129529571825/mda-rg2t8s66hpk1p97c.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1758609569-0-0-8b2df1da181c357ec93f264423203f21&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2368903782&vid=17381405738620841033&klogid=2368903782&abtest=173793_2"></video>
        <audio controls="controls"
               src="https://vd9.bdstatic.com/mda-rg2t8s66hpk1p97c/mb/cae_h264/1751570129529571825/mda-rg2t8s66hpk1p97c.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1758609569-0-0-8b2df1da181c357ec93f264423203f21&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=2368903782&vid=17381405738620841033&klogid=2368903782&abtest=173793_2"></audio>

        <!-- 滚动标签 -->
        <marquee behavior="scroll" scrolldelay="150" bgcolor="blue" width="525" height="50">
            <font size="10" color="yellow">
                祝你今天有个好心情！
            </font>
        </marquee>

        <!-- 表格 -->
        <table border="1px">
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>

            <tr>
                <td>400</td>
                <td>500</td>
                <td>600</td>
            </tr>
        </table>
        <br>
        <hr>
        <center>
            <table border="1px" cellspacing="0">
                <caption>武器列表</caption>
                <tr>
                    <th>名称</th>
                    <th>伤害值</th>
                </tr>
                <tr>
                    <td>大砍刀</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>冲锋枪</td>
                    <td>150</td>
                </tr>
            </table>
        </center>


        <!-- 框架 -->
        <iframe src="https://www.runoob.com/">

        </iframe>

        <form action="" method="get">
            <h3>登录网易163免费邮</h3>

            <div>
                <label class="label-span" for="user-name" accesskey="V">用户名</label>
                <input type="text" id="user-name" placeholder="请输入用户名"/>
                <span>@163.com</span>
            </div>

            <div>
                <span class="label-span">密码</span>
                <input onfocusout="alert('')" type="password"/>
                <span id="password-id">忘记密码？</span>
            </div>

            <div>
                <span class="label-span">版本</span>
                <select>
                    <option>默认</option>
                    <option>最新版</option>
                </select>
            </div>

            <div>
                <input type="checkbox" name="user-diy"/><span>记住用户名</span>
                <input type="checkbox" name="user-diy"/><span>增强安全性</span>
            </div>

            <div>
<!--                <input type="button" value="登录"/>-->
<!--                <button>登录</button>-->
                <input type="submit" value="登录"/>
                <input type="reset" value="重置"/>
            </div>
        </form>


        <!-- 单选框 -->
        <input type="radio" name="sex"> <span>男</span>
        <input type="radio" name="sex"> <span>女</span>

        <!-- 文件 -->
        <span>上传文件</span><input type="file"/>

        <!-- 多行文本 -->
        <textarea placeholder="请输入数据"></textarea>

        <!-- 盒子模型 -->
        <div id="hezi-demo" style="background-color: blue">
            <div id="hezi-wanman-demo">完满教育</div>
            <div>通识教育</div>
            <div>商科教育</div>
            <div>专业教育</div>
            <div>双院制</div>
            <div>特色课程</div>
        </div>
    </body>

    <div id="mouse-demo" onmouseover="changePink()"
         onmouseleave="changeRed()"
         style="background-color: red; width: 200px;height: 200px">演示鼠标移动事件</div>
    <script language="JavaScript" src="js-demo.js"></script>
</html>
